import React from 'react';
import { Tabs } from 'antd';
import { SubNavBarProps } from '../types';
import styles from './index.less';

const { TabPane } = Tabs;

const SubNavBar: React.FC<SubNavBarProps> = ({ 
  activeStatus, 
  statuses, 
  onStatusChange 
}) => {
  // 处理选项卡切换
  const handleTabChange = (key: string) => {
    onStatusChange(key);
  };

  return (
    <div className={styles['sub-nav']}>
      <Tabs 
        activeKey={activeStatus} 
        onChange={handleTabChange}
        className={styles.tabs}
      >
        {statuses.map(status => (
          <TabPane 
            tab={status.label} 
            key={status.value} 
            className={styles['tab-pane']}
          />
        ))}
      </Tabs>
    </div>
  );
};

export default SubNavBar; 